<template>
  <view class="login-container">
    <!-- 顶部图片 -->
    <view class="top"></view>
    <!-- 登录框 -->
    <view class="bottom">
      <view class="tab-bar">
        <view :class="['tab-item']" @click="">账号登录</view>
        <!-- 账号密码 -->
        <view class="input-item">
          <text class="input-label">手机号</text>
          <input type="text" placeholder="请输入手机号" v-model="this.phone" @input="handleInput($event, 'phone')"
            data-field="phone" class="input-field" />
        </view>
        <view class="input-item">
          <text class="input-label">密码</text>
          <input type="password" v-model="this.password" placeholder="请输入密码" @input="handleInput($event, 'password')"
            data-field="password" class="input-field" />
        </view>
      </view>
      <!-- 登录按钮等内容 -->
      <view class="showDialog">
        <button class="auth-btn" @click="handleAuthLogin">登录</button>
      </view>
      <view class="skip-login" @click="handleSkipLogin">暂不登录</view>
      <view class="agree-row">
        <view class="agree-checkbox">
          <checkbox :checked="isAgree" @click="checkChange" />
        </view>
        <view class="text-box">
          已阅读并同意
          <navigator url="/pages/protocol/userProtocol" open-type="navigate">《用户协议》</navigator>
          和
          <navigator url="/pages/protocol/privacyProtocol" open-type="navigate">《隐私协议》</navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { post } from "@/utils/request";
export default {
  data() {
    return {
      isAgree: false,
      phone: "13298141391",
      password: "123456",
      token: "",
      userInfo: {},
    };
  },
  mounted() {
    const token = uni.getStorageSync("token");
    // if (token) {
    //   uni.navigateTo({
    //     url: '/pages/camera/camera'
    //   });
    // } else {
    //   console.log('未获取到登录状态');
    // }
  },
  methods: {
    // 校验方法
    valid() {
      if (!this.phone || !this.password) {
        uni.showToast({
          title: "手机号或密码错误",
          icon: "none",
          position: "bottom",
        });
        return false;
      }
      return true;
    },
    // 获取输入
    handleInput(e, field) {
      console.log(e, field, "index-e");
      if (field === "phone") {
        this.phone = e.target.value;
      } else if (field === "password") {
        this.password = e.target.value;
      }
      console.log(this.phone, this.password, "index-phone");
    },
    handleLogin() {
      if (!this.valid()) {
        return false;
      }
      post("/api/live/liveLogin", {
        phone: this.phone,
        password: this.password,
      })
        .then((res) => {
          console.log(res, "登录成功");
          this.token = res.data.token;
          uni.setStorageSync("token", this.token);
          //  设置成功提示
          uni.showToast({
            title: "登录成功",
            icon: "success",
            position: "bottom",
          });
          this.userInfo = res.data.userInfo;
          uni.navigateTo({
            url: "/pages/start/start?userInfo=" + encodeURIComponent(JSON.stringify(this.userInfo)),
          });
        })
        .catch((err) => {
          console.log(err, "登录失败");
          uni.showToast({
            title: "登录失败",
            icon: "none",
            position: "bottom",
          });
        });
    },
    // 检查协议
    checkChange() {
      this.isAgree = !this.isAgree;
      console.log(this.isAgree);
    },
    // 登录逻辑
    handleAuthLogin() {
      if (!this.isAgree) {
        uni.showToast({
          title: "请先阅读并同意协议",
          icon: "none",
          position: "bottom",
        });
        return;
      }
      console.log(this.phone, this.password, "index-phone");
      this.handleLogin();
    },
    handleSkipLogin() {
      console.log("暂不登录");
      //不做处理
      // uni.navigateTo({
      //   url: '/pages/zujian/zujian'
      // });
    },
  },
};
</script>
<style scoped>
.login-container {
  /* height: 1708 rpx; */
  height: 100vh;
  background-color: #fff;
}

.top {
  /* width: 429px; */
  height: 472rpx;
  background-image: url("/static/Group_5.png");
  /* background-clip: border-box; */
  background-size: contain;
  /* 使背景图片覆盖整个容器 */
  background-position: top;
  /* 居中显示背景图片 */
  background-repeat: no-repeat;
  /* 禁止背景图片重复 */
  position: relative;
}

.bottom {
  width: 640rpx;
  height: 832rpx;
  /* border: 1px solid red; */
  background-color: #fff;
  position: absolute;
  top: 300rpx;
  left: 56rpx;
}

.tab-bar {
  display: flex;
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.input-item {
  display: flex;
  align-items: center;
  height: 90rpx;
  margin-bottom: 40rpx;
  padding: 0 20rpx;
  /* background-color: #F9C6C6; */
  /* background-color: inherit; */
  border-radius: 12rpx;
  border: 1px solid #f9c6c6;
}

.input-label {
  width: 160rpx;
  font-size: 28rpx;
  color: #666;
}

.input-field {
  flex: 1;
  /* height: 100%; */
  font-size: 28rpx;
  color: #333;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  /* color: #999; */
  color: #000;
  padding-bottom: 30rpx;
  border-bottom: 4rpx solid transparent;
  font-family: Source Han Sans CN;
  font-weight: 700;
  /* font-size: 20px; */
  /* line-height: 100%; */
  letter-spacing: 0%;
}

/* .tab-item.active {
	color: #f00;
	border-bottom-color: #f00;
} */
.showDialog {
  /* border: 1px solid red; */
  /* height: 306rpx; */
  height: 150rpx;
  /* height: 500rpx; */
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

.auth-btn {
  border: 1px solid #ccc;
  background: linear-gradient(to right, #f9caca, #f00);
  color: #fff;
  font-size: 32rpx;
  border-radius: 53rpx;
  display: flex;
  margin: 0 auto;
  /* margin-top: 200rpx; */
  justify-content: center;
  align-items: center;
  width: 592rpx;
  height: 106rpx;
  position: absolute;
  bottom: 0;
}

.skip-login {
  text-align: center;
  margin: 30rpx 0;
  color: #000;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 30rpx;
  line-height: 100%;
  letter-spacing: 0%;
}

.agree-row {
  display: flex;
  align-items: flex-end;
  font-size: 28rpx;
  color: #666;
}

.agree-checkbox {
  margin-right: 10rpx;
  transform: scale(0.8);
  line-height: 40rpx;
  width: 40rpx;
  height: 40rpx;
  text-align: center;
}

.agree-checkbox>>>.uni-checkbox-input {
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  background-color: #ffffff;
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
}

.text-box {
  display: flex;
  align-items: start;
  white-space: nowrap;
}

navigator {
  color: #f00;
  text-decoration: underline;
}
</style>